<template>
  <div>
    <el-form :inline="true" :model="produceWorkOrder" :rules="produceWorkOrderRules" ref="produceWorkOrderRulesForm">
      <!--卡片1-->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div class="text item">
          <div>
            <el-form-item label="工单编号" prop="workOrderNum">
              <el-input v-model="produceWorkOrder.workOrderNum" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="生产订单" prop="produceOrderNum">
              <el-input v-model="produceWorkOrder.produceOrderNum" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>


          </div>
          <div>
            <el-form-item label="销售单号">
              <el-input v-model="produceWorkOrder.saleOrderNum" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="优先级" prop="priority">
              <el-radio-group v-model="produceWorkOrder.priority">
                <!--标签中间的是,对外展现的,label中的1是表单数据,发给后端的-->
                <el-radio label="1">紧急</el-radio>
                <el-radio label="0">非紧急</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item label="备注">
            <el-input type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="produceWorkOrder.remark" autocomplete="off" style="width:700px"></el-input>
          </el-form-item>

          <!--            <div slot="footer" class="dialog-footer">-->
          <!--              <el-button @click="cancelAdd">取 消</el-button>-->
          <!--              <el-button type="primary" @click="addProOrd('produceOrderRulesForm')">确 定</el-button>-->
          <!--            </div>-->
        </div>
      </el-card>


      <!--      卡片2-->
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span>生产信息</span>
          <!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>

        <div class="text item">
          <div>
            <el-form-item label="计划产量">
              <el-input v-model="produceWorkOrder.planProduceNum" autocomplete="off" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="产品编号">
              <el-input v-model="produceWorkOrder.productCode" autocomplete="off" style="width:300px"></el-input>
            </el-form-item>

          </div>
          <div>
            <el-form-item label="车间">
              <el-input v-model="produceWorkOrder.workspace" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="生产线">
              <el-input v-model="produceWorkOrder.produceLine" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="工艺路线">
              <el-input v-model="produceWorkOrder.craft" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
          </div>
          <!--            <div slot="footer" class="dialog-footer">-->
          <!--              <el-button @click="cancelAdd">取 消</el-button>-->
          <!--              <el-button type="primary" @click="addProOrd('produceOrderRulesForm')">确 定</el-button>-->
          <!--            </div>-->
        </div>
      </el-card>

      <!--     按钮：卡片3-->
      <el-card class="box-card3">
        <el-form-item label="计划开始时间" prop="planStartTime">
          <div class="block">
            <el-date-picker
              v-model="produceWorkOrder.planStartTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="计划结束时间" prop="planOverTime">
          <div class="block">
            <el-date-picker
              v-model="produceWorkOrder.planOverTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>

        </el-form-item>

        <div class="text item">
          <span slot="footer" class="add-footer">
            <el-button @click="cancelAdd">取消并返回</el-button>
            <el-button type="primary" @click="addWorkOrder('produceWorkOrderRulesForm')">确 定</el-button>
          </span>
        </div>
      </el-card>


    </el-form>


  </div>
</template>

<script>


import {addProduceWorkOrder} from "@/api/produceWorkOrder";

export default {
  name: "ProduceOrder",
  // computed: {
  //   produceOrder() {
  //     return produceOrder
  //   }
  // },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,

      // 暂未用
      keyword: {},

      multipleSelection: [],
      idList: [],

      //增加页面所用
      title: "",
      produceWorkOrder: {
        workOrderNum: null,
        planStartTime: null,
        planOverTime: null,
        priority: null,
        productCode: null,
        planProduceNum: null,
        workspace: null,
        produceLine: null,
        craft: null,
        produceOrderNum: null,
        saleOrderNum: null,
        remark: null,

      },


      // 遮罩层
      loading: true,
      //生产订单表格数据
      produceWorkOrderList: [],


      produceWorkOrderRules: {
        produceOrderNum: [
          {required: true, message: '生产订单编号不能为空', trigger: 'blur'},
        ],
        workOrderNum: [
          {required: true, message: '工单编号不能为空', trigger: 'blur'},
        ],
        priority: [
          {required: true, message: '优先级不能为空', trigger: 'blur'},
        ],

      }

    }
  },
  methods: {

    //确认添加/编辑按钮
    addWorkOrder(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "add") {
            // 此处执行添加...
            addProduceWorkOrder(this.produceWorkOrder).then(res => {
              this.$message({
                type: 'success',
                message: '新增成功!'
              });
              // this.fetchData();
              this.$refs[formName].resetFields();
              // 要跳转回去
              this.returnWorkOrder();
            })
          } else if (this.title == "编辑订单") {
            // 此处执行编辑...
            // console.log(this.title)
            // editOrder(this.produceOrder).then(res => {
            //   this.$message({
            //     type: 'success',
            //     message: '修改成功!'
            //   });
            //   this.fetchData();
            //   this.$refs[formName].resetFields();
            // })
            //

          }
        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false;
      });
    },

    returnWorkOrder(){
      this.$router.push({name: 'ProduceWorkOrder'})
    },

    //取消按钮
    cancelAdd(){
      this.$router.push({name: 'ProduceWorkOrder'})
    }

  },
  // 生命周期钩子函数(vue对象创建完,自动调用该方法)
  created() {
    console.log("created()函数运行")
    this.title = "add"
    console.log("created()函数完毕?..")
  },



}

</script>

<style scoped lang="scss">

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 70%;
  height: 300px;
  margin-top: 10px;
  margin-left: 30px;
}

.box-card2 {
  width: 70%;
  height: 210px;
  margin-top: 10px;
  margin-left: 30px;
}

.box-card3 {
  width: 70%;
  height: 150px;
  margin-top: 10px;
  margin-left: 30px;
  /*margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 30px;*/
}

.add-footer {
  position: relative;
  left: 65%;
  /*margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 30px;*/
}

</style>
